<template>
    <view class="content">
        <a-demo title="基础使用">
            <view class="row">
                <pure-switch v-model="isChecked"></pure-switch>
            </view>
        </a-demo>

        <a-demo title="开关文字">
            <view class="row">
                <pure-switch v-model="isChecked" openText="开" closeText="关"></pure-switch>
            </view>
        </a-demo>

        <a-demo title="加载状态">
            <view class="row">
                <pure-switch v-model="isChecked" openText="开" closeText="关" loading></pure-switch>
            </view>
        </a-demo>

        <a-demo title="自定义加载图标">
            <view class="row">
                <pure-switch v-model="isChecked" openText="开" closeText="关" loading loadingIcon="__shalou"></pure-switch>
            </view>
        </a-demo>

        <a-demo title="状态图标">
            <view class="row">
                <pure-switch v-model="isChecked" openText="开" closeText="关" openIcon="__wancheng" closeIcon="__shibai"></pure-switch>
            </view>
        </a-demo>

        <a-demo title="禁用状态">
            <view class="row">
                <pure-switch v-model="isChecked" openText="开" closeText="关" openIcon="__wancheng" closeIcon="__shibai" disabled></pure-switch>
            </view>
        </a-demo>

        <a-demo title="异步控制">
            <view class="row">
                <pure-switch
                    v-model="isChecked"
                    openText="开"
                    closeText="关"
                    openIcon="__wancheng"
                    closeIcon="__shibai"
                    async
                    :loading="loading"
                    @asyncChange="handleAsyncChange"
                ></pure-switch>
            </view>
        </a-demo>

        <a-demo title="主题">
            <view class="row">
                <pure-switch v-model="isChecked" openText="开" closeText="关" openIcon="__wancheng" closeIcon="__shibai" class="pure-switch-primary"></pure-switch>
                <pure-switch v-model="isChecked" openText="开" closeText="关" openIcon="__wancheng" closeIcon="__shibai" class="pure-switch-success"></pure-switch>
                <pure-switch v-model="isChecked" openText="开" closeText="关" openIcon="__wancheng" closeIcon="__shibai" class="pure-switch-danger"></pure-switch>
                <pure-switch v-model="isChecked" openText="开" closeText="关" openIcon="__wancheng" closeIcon="__shibai" class="pure-switch-warning"></pure-switch>
                <pure-switch v-model="isChecked" openText="开" closeText="关" openIcon="__wancheng" closeIcon="__shibai" class="pure-switch-info"></pure-switch>
            </view>
        </a-demo>
    </view>
</template>

<script setup>
    import { ref } from "vue";

    // 选中状态
    const isChecked = ref(false);

    // loading
    const loading = ref(false);

    // 异步控制
    function handleAsyncChange(cheked) {
        loading.value = true;
        setTimeout(() => {
            loading.value = false;
            isChecked.value = cheked;
        }, 2000);
    }
</script>

<style scoped>
    .row {
        box-sizing: border-box;
        padding: 15px;
        background: var(--pure-background-element);
        margin: 10px 0;
        border-radius: 4px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
    }
</style>
